<template>
  <el-dialog class="flex-center" title="建模数据查询" :visible.sync="dialogVisible" width="80%" append-to-body
    :close-on-click-modal="false" @close="close">
    <div class="top">
      <el-form inline>
        <el-form-item label="开始时间">
          <el-date-picker class="jk_common_date_picker000" :append-to-body="false" v-model="time"
            value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期"
            end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <div class="top-left">
        <el-button class="js_common_btn" @click="searchBtn" :disabled="searching">数据查询</el-button>
        <el-button class="js_common_btn" @click="importBtn">数据导入</el-button>
      </div>
    </div>
    <div class="content">
      <div class="left"></div>
      <div class="right">
        <EasyTable v-if="colsData.length" :tableData="tableData" :colsData="colsData"></EasyTable>
        <div v-else class="no_data">暂无数据</div>
      </div>
    </div>
    <div class="bottom" v-if="colsData.length">
      <span class="title">选择建模变量列：</span>
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
        <el-checkbox v-for="(col, idx) in colsData" :key="col.prop" :label="col.prop" :disabled="idx < 3">{{ col.label
          }}</el-checkbox>
      </el-checkbox-group>
    </div>
    <div v-if="showFooter" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
      <el-button @click="close">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import EasyTable from "./EasyTable";
import * as api from "@/api/myApi/yc_chuangjian";
export default {
  name: "",
  components: { EasyTable },
  props: {
    deviceCode: {
      type: String,
      default: () => "",
    },
    deviceTypeCode: {
      type: String,
      default: () => "",
    },
    type: {
      type: String,
      default: () => "",
    },
    showFooter: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    return {
      dialogVisible: false,
      time: [],
      tableData: [],
      colsData: [],
      checkedCities: [],
      searching: false,
    };
  },
  methods: {
    searchBtn() {
      if (!this.time[0] || !this.time[1]) {
        this.$modal.msgWarning("请选择时间");
        return;
      }
      this.searching = true;
      api
        .getList({
          deviceTypeCode: this.deviceTypeCode,
          deviceCode: this.deviceCode,
          type: this.type,
          startTime: this.time[0],
          endTime: this.time[1],
        })
        .then((res) => {
          this.tableData = res.data.tableData;

          res.data.tableName.forEach((element) => {
            element.show = true;
          });
          this.colsData = res.data.tableName;
          this.checkedCities = [];
          this.colsData.forEach((element) => {
            element.align = "center";
            this.checkedCities.push(element.prop);
          });
        })
        .finally(() => {
          this.searching = false;
        });
    },
    importBtn() {
      if (this.colsData.length === 0) {
        this.$modal.msgWarning("请先查询数据");
        return;
      }
      let tableData = [];
      this.tableData.forEach((element) => {
        let tmp = {};
        this.checkedCities.forEach((key) => {
          tmp[key] = element[key];
        });
        tableData.push(tmp);
      });
      let tableName = [];
      this.colsData.forEach((element) => {
        if (element.show) {
          tableName.push({
            label: element.label,
            prop: element.prop,
            width: element.width,
          });
        }
      });
      api
        .importTableData({
          tableData,
          tableName,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(res.msg);

            this.$emit("syncData", {
              tableData,
              tableName,
            });
            this.$emit("close");
          }
        });
    },
    handleCheckedCitiesChange(val) {
      this.colsData.forEach((item) => {
        if (val.includes(item.prop)) {
          item.show = true;
        } else {
          item.show = false;
        }
      });
    },
    confirm() {
      this.$emit("confirm");
    },
    close() {
      this.dialogVisible = false;
      this.$emit("close");
    },
  },
  created() {
    setTimeout(() => {
      this.dialogVisible = true;
    }, 50);
  },
  mounted() { },
};
</script>
<style lang="scss" scoped>
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.content {
  // height: 400px;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .left {}

  .right {
    width: 100%;

    // height: 100%;
    .no_data {
      width: 100%;
      height: 400px;
      border: 1px solid #2e82af;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      color: #cbcbcb;
    }
  }
}

.bottom {
  margin-top: 20px;
  display: flex;

  span.title {
    width: 160px;
    margin-right: 20px;
    color: #fff;
    font-size: 16px;
  }
}

::v-deep .el-form--inline .el-form-item {
  margin-bottom: 0;
}
</style>
